টুলটিপ এবং মডালস হলো jQuery ব্যবহার করে ওয়েব ইন্টারফেসে ব্যবহারকারীর অভিজ্ঞতা উন্নত করার দুটি গুরুত্বপূর্ণ ইন্টারেক্টিভ উপাদান।
টুলটিপ
টুলটিপ হল একটি ছোট পপ-আপ বাক্স যা সাধারণত ব্যবহারকারীর মাউস একটি এলিমেন্টের উপর যাওয়ার সময় প্রদর্শিত হয়। এটি এলিমেন্ট সম্পর্কে অতিরিক্ত তথ্য প্রদান করে।
টুলটিপ তৈরি: jQuery UI ব্যবহার
jQuery UI দিয়ে সহজেই একটি কাস্টম টুলটিপ তৈরি করা যায়।
HTML:
<p title="এটি একটি টুলটিপ উদাহরণ।">মাউস এখানে নিয়ে যান</p>
jQuery:
$(document).ready(function() {
$(document).tooltip();
});
CSS দিয়ে টুলটিপ কাস্টমাইজেশন
jQuery UI টুলটিপ স্টাইল কাস্টমাইজ করার জন্য CSS ব্যবহার করতে পারেন।
উদাহরণ:
.ui-tooltip {
background: yellow;
color: black;
font-size: 14px;
border: 1px solid black;
}
মডালস
মডাল হলো একটি পপ-আপ ডায়লগ বক্স যা ব্যবহারকারীর দৃষ্টি আকর্ষণ করার জন্য এবং তাদের ইন্টারঅ্যাকশনের আগে বিশেষ কিছু করতে বাধ্য করার জন্য ব্যবহৃত হয়। এটি সাধারণত ব্যাকগ্রাউন্ডের অন্যান্য উপাদান লুকিয়ে রাখে।
মডাল তৈরি: jQuery UI ব্যবহার
jQuery UI দিয়ে সহজে মডাল তৈরি করা যায়।
HTML:
<div id="myModal" title="মডাল উইন্ডো">
<p>এটি একটি মডাল উইন্ডো উদাহরণ।</p>
</div>
<button id="openModal">মডাল খুলুন</button>
jQuery:
$(document).ready(function() {
$("#myModal").dialog({
autoOpen: false,
modal: true,
buttons: {
"Close": function() {
$(this).dialog("close");
}
}
});
$("#openModal").click(function() {
$("#myModal").dialog("open");
});
});
ব্যবহারের গুরুত্বপূর্ণ দিক
টুলটিপের ক্ষেত্রে
- ছোট এবং প্রাসঙ্গিক তথ্য যোগ করুন।
- স্টাইলিং কাস্টমাইজ করুন যাতে এটি ওয়েবসাইটের ডিজাইনের সাথে সামঞ্জস্যপূর্ণ থাকে।
মডালের ক্ষেত্রে
- ব্যবহারকারী বন্ধ না করা পর্যন্ত মডাল দৃশ্যমান রাখুন।
- কন্টেন্টকে সহজ এবং কার্যকর রাখুন, যেমন ফর্ম সাবমিশন, নোটিফিকেশন বা কনফার্মেশন।
টুলটিপ এবং মডালস ব্যবহারকারীর ইন্টারফেসের কার্যকারিতা এবং নান্দনিকতা বৃদ্ধি করে। টুলটিপ ছোটখাটো তথ্য দেখানোর জন্য উপযোগী, যেখানে মডাল গুরুত্বপূর্ণ এবং বাধ্যতামূলক তথ্য প্রদর্শনের জন্য ব্যবহার করা হয়। jQuery UI দিয়ে এই উপাদানগুলো দ্রুত এবং সহজেই তৈরি করা সম্ভব।
কাস্টম টুলটিপ তৈরি করা ওয়েব পেজে ব্যবহারকারীদের বিশেষ তথ্য দেখাতে সাহায্য করে যখন তারা মাউস দিয়ে কোনো নির্দিষ্ট এলিমেন্টের উপর হোভার করে। jQuery ব্যবহার করে আপনি সহজেই এমন একটি টুলটিপ তৈরি করতে পারেন যা আপনার ওয়েব পেজের ডিজাইন এবং ফাংশনালিটির সাথে মিলবে।
HTML এবং CSS সেটআপ
প্রথমে, আপনাকে টুলটিপ প্রদর্শনের জন্য কিছু বেসিক HTML এবং CSS সেট আপ করতে হবে।
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Tooltip Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hover over this text to see the <span class="tooltip">tooltip<span class="tooltiptext">This is the tooltip text!</span></span>.</p>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css):
.tooltip {
position: relative;
display: inline-block;
}
.tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: white;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
jQuery স্ক্রিপ্ট (script.js)
jQuery ব্যবহার করে আপনি টুলটিপের ইন্টারঅ্যাকটিভ বিহেভিয়র যোগ করতে পারেন।
JavaScript (script.js):
$(document).ready(function() {
$('.tooltip').hover(function() {
// হোভারের সময় টুলটিপ দেখান
$(this).find('.tooltiptext').css('visibility', 'visible').animate({opacity: 1}, 300);
}, function() {
// হোভার শেষে টুলটিপ লুকান
$(this).find('.tooltiptext').animate({opacity: 0}, 300, function() {
$(this).css('visibility', 'hidden');
});
});
});
এই স্ক্রিপ্টটি হোভার করার সময় টুলটিপ টেক্সটকে দৃশ্যমান করে এবং হোভার শেষে তা ধীরে ধীরে লুকায়। CSS ট্রানজিশন এবং jQuery অ্যানিমেশনের মিশ্রণ একটি সুন্দর এবং মসৃণ ভিজ্যুয়াল ইফেক্ট তৈরি করে।
এই কাস্টম টুলটিপ সমাধান আপনার ওয়েব অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও ইন্টারঅ্যাক্টিভ এবং আকর্ষণীয় করে তুলবে। jQuery এবং CSS ব্যবহার করে টুলটিপ ফাংশনালিটি যো
গ করা একটি কার্যকর উপায় যা বিভিন্ন ওয়েব প্রোজেক্টে প্রয়োগ করা যেতে পারে।
মডাল উইন্ডো হলো এক ধরনের ডায়ালগ বক্স যা ওয়েবপেজের মূল কন্টেন্টের উপরে একটি বিশেষ লেয়ার হিসেবে প্রদর্শিত হয়। এটি ব্যবহারকারীকে কোনো বিশেষ তথ্য প্রদান করে অথবা ইনপুট চাইতে পারে। jQuery ব্যবহার করে সহজেই এই ধরনের মডাল উইন্ডো তৈরি এবং ম্যানেজ করা যায়।
মডাল উইন্ডো তৈরির ধাপগুলি:
1. HTML স্ট্রাকচার তৈরি: প্রথমে একটি বেসিক HTML স্ট্রাকচার তৈরি করুন যা মডাল উইন্ডো এবং একটি ট্রিগার বাটন ধারণ করবে।
<!-- ট্রিগার বাটন -->
<button id="openModal">মডাল খুলুন</button>
<!-- মডাল উইন্ডো -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>এটি একটি মডাল উইন্ডো।</p>
</div>
</div>
2. CSS যোগ করুন: মডালের বেসিক স্টাইলিং নিশ্চিত করুন যাতে এটি সুন্দর এবং ব্যবহারিক হয়।
/* মডাল বেকগ্রাউন্ড */
.modal {
display: none; /* প্রদর্শন থেকে লুকানো */
position: fixed; /* স্থির পজিশন */
z-index: 1; /* জে-ইনডেক্স উপরে */
left: 0;
top: 0;
width: 100%; /* পূর্ণ প্রস্থ */
height: 100%; /* পূর্ণ উচ্চতা */
overflow: auto; /* স্ক্রলবার যোগ করা */
background-color: rgb(0,0,0); /* ফেড কালো বেকগ্রাউন্ড */
background-color: rgba(0,0,0,0.4); /* অপারসিটি সহ */
}
/* মডাল কন্টেন্ট */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% টপ এবং সেন্টার্ড */
padding: 20px;
border: 1px solid #888;
width: 80%; /* 80% প্রস্থ */
}
/* দ্য ক্লোজ বাটন */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
3. jQuery দ্বারা ইন্টারঅ্যাকশন যোগ করুন: jQuery কোড যুক্ত করে মডাল উইন্ডো খুলা এবং বন্ধ করার ফাংশনালিটি যোগ করুন।
$(document).ready(function(){
// মডাল খুলুন
$("#openModal").click(function(){
$("#myModal").show();
});
// মডাল বন্ধ করুন
$(".close").click(function(){
$("#myModal").hide();
});
// যদি মডালের বাইরে ক্লিক করা হয়, মডাল বন্ধ করুন
$(window).click(function(event) {
if ($(event.target).is("#myModal")) {
$("#myModal").hide();
}
});
});jQuery দ্বারা মডাল উইন্ডো তৈরি এবং ম্যানেজ করা অত্যন্ত সহজ। উপরের ধাপগুলো অনুসরণ করে, আপনি কোনো ওয়েবপেজে সহজেই মডাল উইন্ডো ইমপ্লিমেন্ট করতে পারবেন, যা ব্যবহারকারীকে অতিরিক্ত তথ্য প্রদান করবে অথবা তাদের কাছ থেকে ইনপুট চাইবে।
jQuery UI হল একটি শক্তিশালী প্লাগইন যা বিভিন্ন ধরণের UI উপাদান তৈরি করতে সহায়তা করে। এর মধ্যে টুলটিপ (Tooltip) এবং ডায়ালগ (Dialog) হলো দুটি বহুল ব্যবহৃত ফিচার। এগুলো ব্যবহারকারীর ইন্টারফেসকে আরও ইন্টারঅ্যাকটিভ এবং কার্যকর করে তোলে।
jQuery UI টুলটিপ
টুলটিপ হল একটি ছোট পপ-আপ বাক্স যা ব্যবহারকারীর মাউস একটি এলিমেন্টের উপর গেলে প্রদর্শিত হয়। এটি এলিমেন্ট সম্পর্কে অতিরিক্ত তথ্য সরবরাহ করে।
মৌলিক টুলটিপ উদাহরণ
HTML:
<p title="এটি একটি টুলটিপ উদাহরণ।">মাউস এখানে নিয়ে যান</p>
jQuery:
$(document).ready(function() {
$(document).tooltip();
});
কাস্টমাইজড টুলটিপ
টুলটিপ কাস্টমাইজ করতে jQuery UI টুলটিপের বিভিন্ন অপশন ব্যবহার করা যায়।
HTML:
<p title="টুলটিপ টেক্সট">এই বাক্যের উপর মাউস রাখুন।</p>
jQuery:
$(document).ready(function() {
$(document).tooltip({
show: { effect: "slideDown", duration: 200 },
hide: { effect: "fadeOut", duration: 200 },
position: { my: "left+15 center", at: "right center" }
});
});
CSS:
.ui-tooltip {
background: #333;
color: #fff;
font-size: 14px;
padding: 10px;
border-radius: 5px;
}
jQuery UI ডায়ালগ
ডায়ালগ একটি মডাল পপ-আপ উইন্ডো যা গুরুত্বপূর্ণ মেসেজ, ফর্ম, বা অপশন দেখানোর জন্য ব্যবহার করা হয়। এটি ব্যবহারকারীকে একটি নির্দিষ্ট কাজ সম্পন্ন করার জন্য মনোযোগ কেন্দ্রীভূত করতে সহায়তা করে।
মৌলিক ডায়ালগ উদাহরণ
HTML:
<div id="myDialog" title="ডায়ালগ উইন্ডো">
<p>এটি একটি সাধারণ ডায়ালগ উদাহরণ।</p>
</div>
<button id="openDialog">ডায়ালগ খুলুন</button>
jQuery:
$(document).ready(function() {
$("#myDialog").dialog({
autoOpen: false, // ডায়ালগ স্বয়ংক্রিয়ভাবে খুলবে না
modal: true // ব্যাকগ্রাউন্ড লক থাকবে
});
$("#openDialog").click(function() {
$("#myDialog").dialog("open");
});
});
কাস্টমাইজড ডায়ালগ
ডায়ালগ আরও কার্যকর করতে কাস্টম অপশন যোগ করা যায়।
HTML:
<div id="customDialog" title="কাস্টম ডায়ালগ">
<p>আপনি কি নিশ্চিত?</p>
</div>
<button id="openCustomDialog">কাস্টম ডায়ালগ খুলুন</button>
jQuery:
$(document).ready(function() {
$("#customDialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"Confirm": function() {
alert("আপনি নিশ্চিত করেছেন!");
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
$("#openCustomDialog").click(function() {
$("#customDialog").dialog("open");
});
});
- টুলটিপ: সহজ তথ্য প্রদর্শনের জন্য কার্যকর, যা মাউস-ওভার ইভেন্টে ট্রিগার হয়।
- ডায়ালগ: গুরুত্বপূর্ণ মেসেজ বা কাজের জন্য ব্যবহার করা হয় এবং এটি ব্যবহারকারীর মনোযোগ কেন্দ্রীভূত করে।
jQuery UI টুলটিপ এবং ডায়ালগ ব্যবহার করে ওয়েব পেজে কার্যকর ইন্টারফেস তৈরি করা সহজ এবং দ্রুত। এগুলো কাস্টমাইজেশন অপশন প্রদান করে, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
Read more
